<script>
import countTo from 'vue-count-to'


export default {
  name: 'ParkData',
  components: {
    countTo
  }
}
</script>

<template>
  <div class="park-data-container">
    <div class="header">物流数据</div>
    <ul>
      <li>
        <span class="text">累计包裹数量(件)</span>
        <span class="count">
          <count-to :startVal="0" :endVal="1546411" :duration="7000"></count-to>
        </span>
      </li>
      <li>
        <span class="text">车辆数量(量)</span>
        <span class="count">
        <count-to :startVal="0" :endVal="952615"  :duration="7000"></count-to>
        </span>
      </li>
      <li>
        <span class="text">总共获得运费(元)</span>
        <span class="count">
        <count-to :startVal="0" :endVal="715415"  :duration="7000"></count-to>
        </span>
      </li>
      <li>
        <span class="text">快递员数量(位)</span>
        <span class="count">
        <count-to :startVal="0" :endVal="4844147"  :duration="7000"></count-to>
        </span>
      </li>
    </ul>
  </div>
</template>

<style scoped lang="scss">
.park-data-container {
  background-color: #fff;
  padding: 20px;

  ul {
    list-style: none;
    display: flex;
    margin-top: 10px;

    li {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      span {
        margin: 12px 0;
      }

      .text {
        display: block;
        width: 100%;
        color: #909399;
        font-size: 13px;
      }

      .count {
        display: block;
        width: 100%;
        font-size: 25px;
      }
    }
  }
}
</style>
